const imgS = document.querySelector('.is')
const imgB = document.querySelector('.ib')
const ind = document.querySelector('.ind')
const price = document.querySelector('.price')
const boxInp = document.querySelector('.boxBoxbox')
const show = document.querySelector('.show')
const mask = document.querySelector('.mask')
const enlarge = document.querySelector('.enlarge')
// 把本地存储的数据渲染到页面上
blind()
function blind() {
  let src = window.localStorage.getItem('num')
  let text = window.localStorage.getItem('title')
  let jiage = window.localStorage.getItem('price')
  let str = ''
  str += `
        <div class= "boxBoxbox">
          <div class="show">
            <img src="${ src }" alt="" class="is" style="width: 100%;height: 100%;">
            <div class="mask">
            </div>
          </div>
          <div class="showright">
            <p class="ind">${ text }</p>
            <p class="price">售价： <span>￥${ jiage }</span> </p>
            <p class="cart">加入购物车</p>
          </div>
          <div class="enlarge">
            <img src="${ src }" alt="" class="ib">
          </div>
        </div>
  `
  // let src = window.localStorage.getItem('num')
  
  // imgS.src = src
  // imgB.src = src
  boxInp.innerHTML = str
}


// 放大镜
class Enlarge{
  constructor(select){
    this.ele = document.querySelector(select)
    this.show = this.ele.querySelector('.show')
    this.mask = this.ele.querySelector('.mask')
    this.list = this.ele.querySelector('.list')
    this.enlarge = this.ele.querySelector('.enlarge')
    this.bg = this.enlarge.firstElementChild
    // 拿到数值
    this.show_w = this.show.clientWidth
    this.show_h = this.show.clientHeight
    this.mask_w =parseInt(window.getComputedStyle(this.mask).width)
    this.mask_h = parseInt(window.getComputedStyle(this.mask).height)
    this.bg_w = 800 + 0
    this.bg_h = 800 + 0
  }
  // 步骤一，计算比例给放大镜设置宽高
  // this.setScale()
  setScale(){
    this.enlarge_w = this.mask_w*this.bg_w/this.show_w
    this.enlarge_h = this.mask_h*this.bg_h/this.show_h
    this.enlarge.style.width = this.enlarge_w
    this.enlarge.style.height = this.enlarge_h
  }

  // 移入移出事件，移入得时候显示，移除消失
  overOut(){
    // 移入
    this.show.addEventListener('mouseover',() => {
      // console.log(this);
      this.mask.style.display = 'block'
      this.enlarge.style.display = 'block'
    })
    // 移出
    this.show.addEventListener('mouseout', () => {
      this.mask.style.display = 'none'
      this.enlarge.style.display = 'none'
    })
  }

  // 点击事件
  // listChange(){
  //   this.list.addEventListener('click',(e) => {
  //     e = e || window.event
  //     const target = e.target || e.srcElement
  //     if(target.nodeName !== 'IMG')return
  //     for(let i = 0; i < this.list.children.length; i++){
  //       console.log(i);
  //       this.list.children[i].classList.remove('active')
  //     }
  //     target.classList.add('active')
  //     const showUrl = target.dataset.show
  //     const bgUrl = target.dataset.bg
  //     this.show.firstElementChild.src = showUrl
  //     this.bg.src = bgUrl
  //   })
  // }

  // 移动放大事件
  move(){
    this.show.addEventListener('mousemove',(e) => {
      e = e || window.event
      const target = e.target || e.srcElement
      let x = e.offsetX  - this.mask_w/2
      let y = e.offsetY - this.mask_h/2
      console.log(x);
      if(x <= 0)x = 0
      if(y < 0) y = 0
      if(x >= this.show_w - this.mask_w)x = this.show_w - this.mask_w
      if(y >= this.show_h - this.mask_h)y = this.show_h - this.mask_h
      this.mask.style.left = x +'px'
      this.mask.style.top = y +'px'
      const bgleft = x*this.enlarge_w/this.mask_w
      const bgtop = y*this.enlarge_h/this.mask_h
      console.log(bgleft);
      this.bg.style.left = -bgleft + 'px'
      this.bg.style.top = -bgtop + 'px'
    })
  }
}
const e = new Enlarge('#box')
console.log(e)
e.setScale()
e.overOut()
// e.listChange()
e.move()


// 去到登录页
const login = document.querySelector('.login')
login.addEventListener('click', () => {
  window.location.href = './login.html'
})
// 去到注册页
const regist = document.querySelector('.regist')
regist.addEventListener('click', () => {
  window.location.href = './regist.html'
})
// 去到购物车页面
const cart = document.querySelector('.cartht')
cart.addEventListener('click', () => {
  window.location.href = './cart.html'
})
